<html manifest="IGNORE.manifest" lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"><html manifest="IGNORE.manifest" lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" th:href="@{${uiPath} + ${appName} + '/css/reset.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/CLSRZ.css" th:href="@{${uiPath} + ${appName} + '/css/CLSRZ.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/zdialog.css"
          th:href="@{${uiPath} + ${appName} + '/css/zdialog.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/webuploader.css"  th:href="@{${uiPath} + ${appName} + '/css/webuploader.css'}"/>
</head>
<body>
<form id="commentForm" th:action="@{'/materialGoods/goodsUpdate'}" method="post">

<div id="xiugiahchagaoqi" class="azong">

    <div class="gtoubu">
        <p class="shpingunli">修改商品</p>
        <a href="javascript:history.go(-1);"><img class="fanhui" src="../images/raw_1503386635.png" alt=""></a>
    </div>
    <div class="kuaiw"> </div>
    <div class="xgfenlei">
        <div class="xgleft">
            <p class="jibie">所有材料必须满足EO级别</p>
            <p class="xgfirst"><b>第一步：选择大类</b></p>
            <div class="xgdiyi">
                <p class="xgwos" th:each="bigs,bigsStat: ${bigs}" th:utext="${bigs.bigName}"
                   th:class="${bigs.bigId==data.typeBigId}?'xgwos ktws':'xgwos'" th:onclick="'typeClieck('+${bigs.bigId}+')'"
                   th:id="${bigs.bigId}+'big'" th:data="${bigs.bigId}">客厅卧室</p>
            </div>
            <p class="baikuai"></p>
            <p class="xgfirst"><b>第二步：选择中类</b></p>
            <div class="xgdier" th:each="bigsTypeList,bigsTypeStat: ${bigs}" th:id="${bigsTypeList.bigId}+'list'"
                 th:style="${bigsTypeStat.index==0}?'display:block':'display:none'">
                <div th:each="middleList,middleStat: ${bigsTypeList.materialGoodsTypeMiddleList}">
                    <p class="zlei zlei0" th:id="${middleList.middleId}+'ddleId'"
                       th:utext="${middleList.middleName}" th:class="${middleList.middleId==data.typeMiddleId}?'tj tj0':'tj'"
                       th:onclick="'listClieck('+${middleList.middleId}+')'" th:data="${middleList.middleId}">
                        建材类</p>
                </div>
            </div>

            <p class="baikuai"></p>
            <p class="xgfirst"><b>第三步：选择子类</b></p>
            <div th:each="bigsTypeALLList,bigsTypeStat: ${bigs}"
                 th:style="${bigsTypeStat.index==0}?'display:block':'display:none'"
                 th:id="${bigsTypeALLList.bigId+'typearea'}" class="xiugaidisan">
                <div class="areastatus"
                     th:each="middleAllList,middleallListStat:${bigsTypeALLList.materialGoodsTypeMiddleList}"
                     th:style="${middleallListStat.index==0}?'display:block':'display:none'"
                     th:id="${middleAllList.middleId+'ddleIdType'}">
                    <div th:each="middleSmallList,middleListStat:${middleAllList.materialGoodsTypeSmallList}"
                         th:if="${middleallListStat.size!=0}">
                        <p th:utext="${middleSmallList.smallName}" th:id="${middleSmallList.smallId}"
                           th:class="${middleSmallList.smallId==data.typeSmallId}?'zlei zlei0':'zlei'" class="zlei"
                           th:onclick="'areaClieck(this)'" th:data="${middleSmallList.smallId}"></p>
                    </div>
                </div>
            </div>
            <p class="baikuai"></p>
            <p class="xgfirst"><b>第四步：填写材料</b></p>
        </div>
    </div>
    <div class="xqzil xqzill">
        <ul class="xqwb xqwbb">
            <li class="xqzb">
                <p class="xqnf">商品名称：</p>
                <input name="goodsName" th:value="${data.goodsName}" id="spmingzi" class="xqnsf" type="text">
                <input name="shopId" th:value="${data.shopId}"type="hidden">
                <input name="status" th:value="${data.status}"type="hidden">
                <input name="useId" th:value="${data.useId}"type="hidden">
                <input name="sales" th:value="${data.sales}"  type="hidden">
                <input name="goodsId" th:value="${data.goodsId}"  type="hidden">

            </li>
            <li class="xqzb">
                <p class="xqnf">商品库存量：</p>
                <input id="spkucunl" class="xqnsf" name="amount" th:value="${data.amount}" type="text">

            </li>
            <li class="xqzb">
                <p class="xqnf">商品单位：</p>
                <input id="spdanweil" class="xqnsf" name="unit" th:value="${data.unit}" type="text">

            </li>

            <li class="xqzb xqzbbb">
                <div class="xuancehangye">
                    <div id="anzhuagngaoqi" class="biaogexuaz" action="" method="get">是否免费安装：
                        <label class="xuazetued"><input class="yeschect" name="hasInstall" type="radio" value="1" onclick="anzhuangclick()" th:checked="${data.hasInstall==1}" /><span></span>是</label>
                        <label class="xuazetued"><input class="yeschect" name="hasInstall" type="radio" value="0" onclick="anzhuangclick()"  th:checked="${data.hasInstall==0}"/><span></span>否</label>
                        <input type="hidden" name="typeBigId" id="typeBigId">
                        <input type="hidden" name="typeMiddleId" id="typeMiddleId">
                        <input type="hidden" name="typeSmallId" id="typeSmallId">
                        <input type="hidden" name="isOpenpin" id="isOpenpin" value="0">
                    </div>

                </div>
                <p class="pinpric">安装费：</p>
                <input class="xqnsf godsendprce" placeholder=" 请输入安装费" type="text" name="installPrice"
                       id="installPrice" th:value="${data.installPrice}">
            </li>
            <li class="miaosuli">
                <p class="miaosup">商品详细描述：</p>
                <textarea name="description" th:value="${data.description}" id="miaosu" cols="30"  rows="10"></textarea>
            </li>
        </ul>
    </div>
    <p class="baikuai"></p>
    <div class="xqfive">
        <p class="xqfivet"><b>五：规格、颜色、尺寸</b></p>
        <p class="xqxinghao">添加商品型号</p>
        <div class="donttianjia">
            <div  th:class="xinghaotj"  >
                <div th:id="'by'+${goosStat.index}" th:each="goods,goosStat:${data.modelList}" >
                <div  class="baoxinghao">
                    <p  th:id="'xh'+${goods.modelId}" class="xqxinghaox" th:utext="${goods.modelName}">231</p>
                    <p  th:id="'xh'+${goods.modelId}"class="xqxinghaox" th:utext="${goods.size}">213</p>
                    <p  th:id="'xh'+${goods.modelId}" class="xqxinghaox" th:utext="${goods.color}">123</p>
                    <p  th:id="'xh'+${goods.modelId}" class="xqxinghaox" th:utext="${goods.price}">1231</p>
                 </div>
                    <input th:type="hidden"  th:id="'xhinIdput'+${goosStat.index}" th:name="'modelList['+${goosStat.index}+'].modelId'" th:value="${goods.modelId}">

                    <input th:type="hidden"  th:id="'xhinput'+${goosStat.index}" th:name="'modelList['+${goosStat.index}+'].modelName'" th:value="${goods.modelName}">
                    <input th:type="hidden"  th:id="'clcuncinput'+${goosStat.index}" th:name="'modelList['+${goosStat.index}+'].size'" th:value="${goods.size}">
                    <input th:type="hidden"  th:id="'yansecinput'+${goosStat.index}" th:name="'modelList['+${goosStat.index}+'].color'" th:value="${goods.color}">
                    <input th:type="hidden"  th:id="'jiagecinput'+${goosStat.index}" th:name="'modelList['+${goosStat.index}+'].price'" th:value="${goods.price}">
                    <input th:type="hidden"  th:id="'imgSrcinput'+${goosStat.index}" th:name="'modelList['+${goosStat.index}+'].imgUrl'" th:value="${goods.imgUrl}">

                    <p id='dexh" + inpts + "' th:id="'dexh'+${goosStat.index}" class='addtu7' th:onclick="'delete_system1('+${goosStat.index}+','+${goods.modelId}+')'"></p>
                <img th:id="'pic'+${goosStat.index}" th:src="${goods.imgUrl}">
            </div>
            </div></div>
        <input type="hidden" id="xinghaosize" th:value="${xinghao}">
        <div class="donttianjiadf"></div>
    </div>
    <p class="baikuai"></p>
    <div class="xqfive">
        <p class="xqfivet"><b>六：拼单设置</b></p>

        <div class="checkbox">
            <p class="tisipind">是否开启拼单</p>
            <input type="checkbox" id="ios-checkbox" name="emulate-ios-button" class="raw-checkbox">
            <label for="ios-checkbox" class="emulate-ios-button" onclick="kaiguan1()"></label>
            <p class="kaiqi">开启</p>
        </div>

    </div>
    <div class="bcuocunxiugai">
        <p class="tiajiagoods" th:onclick="'saveGoods()'">修改</p>
    </div>
    <div class="tishi">
        <div class="zongtishi">
            <div class="tishiyu">
                <p class="tishiyukn">提示</p>
                <input class="shuruguig guiged" type="text" placeholder="请输入商品型号">
                <input class="shuruguig chicun" type="text" placeholder="请输入商品尺寸(单位cm)">
                <input class="shuruguig yanse" type="text" placeholder="请输入商品颜色">
                <input class="shuruguig jiage" type="text" placeholder="请输入商品价格">
                <input type="hidden" id="img1">

                <div  id="shctp1">
                    <div id="uploader-demo">
                        <div id="filePickerd" class="zhaopianbeijing"></div>
                        <div id="fileList"  class="xqtu uploader-list"></div>
                    </div>

                </div>
            </div>
            <div class="queingq">
                <p class="quxiaod">取消</p>
                <p class="quedind">添加</p>
            </div>
        </div>
    </div>

</div>
</form>
<script type="text/javascript" src="../js/flexible.js" th:src="@{${uiPath} + ${appName} + '/js/flexible.js'}"></script>
<script type="text/javascript" src="../js/jquery.min.js" th:src="@{${uiPath} + ${appName} + '/js/jquery.min.js'}"></script>
<!-- <script type="text/javascript" src="../js/baseth:value.js"></script> -->
<script type="text/javascript" src="../js/zdialog.js" th:src="@{${uiPath} + ${appName} + '/js/zdialog.js'}"></script>
<script type="text/javascript" src="../js/webuploader.min.js" th:src="@{${uiPath} + ${appName} + '/js/webuploader.min.js'}"></script>
<script type="text/javascript" src="../js/CLSRZ.js" th:src="@{${uiPath} + ${appName} + '/js/CLSRZ.js'}"></script>
    <script th:inline="javascript">
    var xianzyix=$('#xinghaosize').val();
    window.onload = function() {
        initUploader();
    };
var delectMode=0;
    function initUploader() {
        //百度上传按钮

        var uploader = WebUploader.create({
            // swf文件路径
            swf: '../webuploader-0.1.5/Uploader.swf',
            // 文件接收服务端
            method: 'POST',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                "id": '#filePickerd',
                "multiple": true
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 选完文件后，是否自动上传。
            auto: false,
            // 只允许选择图片文件
            accept: {
                title: '图片文件',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on('fileQueued', function (file) {
            $.ajax({
                url: 'http://easyjiang.huizhuangfang.com.cn/aliyun/oss/policy',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function (result) {
                    var suffix = get_suffix(file.name);
                    var random_name = random_string();
                    uploader.options.formData.key = result.dir + '/' + random_name + suffix;
                    uploader.options.formData.policy = result.policy;
                    uploader.options.formData.OSSAccessKeyId = result.OSSAccessKeyId;
                    uploader.options.formData.success_action_status = 200;
                    uploader.options.formData.callback = result.callback;
                    uploader.options.formData.signature = result.signature;
                    uploader.options.server = result.action;
                    uploader.upload();
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        });
        uploader.on('uploadSuccess', function (file, response) {

            $('#img1').val(response.data.filename).focus();

            $("#fileList").css("background-image", 'url("' + response.data.filename + '")');
            uploader.destroy();
            initUploader();


        });
        uploader.on('uploadError', function (file) {
            console.log('uploadError', file);
        });
    }

    // 根据路径获取后缀
    function get_suffix(filename) {
        var pos = filename.lastIndexOf('.');
        var suffix = '';
        if (pos != -1) {
            suffix = filename.substring(pos);
        }
        return suffix;
    }

    // 随机字符串
    function random_string(len) {
        len = len || 32;
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var maxPos = chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }

    function typeClieck(id) {
        $('.ktws').removeClass('ktws');

        $('#' + id + 'big').addClass('ktws');
        $('.xgdier').hide();
        $('#' + id + 'list').show();
        $('.areastatus').hide();
        $('.tj0').removeClass('tj0');
        $('#' + id + 'list').children('div').first().children('p').first().addClass('tj0');
        $('.xiugaidisan').hide();
        $('#' + id + 'typearea').show();
        $('#' + id + 'typearea').children('div').first().show();
        $('.zlei0').removeClass('zlei0');
        $('#' + id + 'typearea').children('div').first().children('div').first().children('p').first().addClass('zlei0');
    }

    function listClieck(id) {
        $('.tj0').removeClass('tj0');
        $('#' + id + 'ddleId').addClass('tj0');
        $('.areastatus').hide();
        $('#' + id + 'ddleIdType').show();
        $('.zlei0').removeClass('zlei0');
        $('#' + id + 'ddleIdType').children('div').first().children('p').first().addClass('zlei0');
    }

    function areaClieck(obj) {
        $('.zlei0').removeClass('zlei0');
        $(obj).addClass('zlei0');
    }


    function kaiguan1() {
        var id = $('#isOpenpin').val();
        if (id == 0) {
            $('#isOpenpin').val(1);
        } else {
            $('#isOpenpin').val(0);
        }
    }

    function saveGoods() {
        $.DialogByZ.Loading(/*[[${uiPath}+${appName}+'/images/loading.png']]*/)
        var typeBigId = $('.ktws').attr("data");
        $('#typeBigId').val(typeBigId);
        var typeMiddleId = $('.tj0').attr("data");
        $('#typeMiddleId').val(typeMiddleId);
        var typeSmallId = $('.zlei0').attr("data");
        $('#typeSmallId').val(typeSmallId);
        $.ajax({
            type: 'post',
            url: $('#commentForm').attr('action'),
            data: $('#commentForm').serialize(),
            dataType: 'json',
            beforeSend: function () {
                if ($('#goodsName').val() == '') {
                    alert("请输入商品名称");
                    $.DialogByZ.Close();

                    return false;
                }
                if ($('#amount').val() == '') {
                    alert("请输入商品数量");
                    $.DialogByZ.Close();
                    return false;
                }
                if ($('#unit').val() == '') {
                    alert("请输入商品数量单位");
                    $.DialogByZ.Close();
                    return false;
                }
                if ($("input[name='hasInstall']:checked").val() == '0') {
                    if ($('#installPrice').val() == '') {
                        alert("请输入安装费用");
                        $.DialogByZ.Close();
                        return false;
                    }
                }
            },

            success: function (result) {
                if (result.code == 1) {
                    $.DialogByZ.Close();
                    if($('#isOpenpin').val()=='1'){
                        $.DialogByZ.Alert({Title: "提交成功", Content: "商品添加成功,进入设置拼单", BtnL: "确定", FunL: localhrefPd(result.data)})
                    }else{
                        $.DialogByZ.Alert({Title: "提交成功", Content: "商品添加成功，返回商品列表页", BtnL: "确定", FunL: localhref()})

                    }
                } else {
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "提交失败", Content: result.data, BtnL: "确定"})
                }
            }

        })
    }

    function localhref() {
        window.location.href = "/materialGoods/index"

    }
    function localhrefPd(id) {
        window.location.href = "/materialGoods/setPindan?goodsId="+id;

    }

    $('.xqxinghao').click(function () {
        if (xianzyix >= 10) {
            $.DialogByZ.Alert({Title: "添加失败", Content: "最多允许十个型号", BtnL: "确定"})
        } else {
            $('.tishi').show();

        }
    })
    var inpts=$('#xinghaosize').val();
    $('.quedind').click(function () {
        inote = $('.shuruguig').val();
        cicunc = $('.chicun').val();
        yansec = $('.yanse').val();
        jiagec = $('.jiage').val();
        imgSrc = $('#img1').val();
        var div = $('<div id="by' + inpts + '" class="baoxinghao"></div>');
        var span = "<p id='xh" + inote + "'  class='xqxinghaox' >" + inote + "</p>" + "<p id='xh" + inote + "'  class='xqxinghaox'>" + cicunc + "</p>" + "<p id='xh" + inote + "'  class='xqxinghaox'>" + yansec + "</p>" + "<p id='xh" + yansec + "'  class='xqxinghaox'>" + jiagec + "</p>";
        var p = "<p id='dexh" + inpts + "' class='addtu7' onclick='delete_system(" + inpts + ")'></p>";
        var img = $('<img id="pic' + inpts + '" class="xingtu" src="' + imgSrc + '" />');
        var input = "<input id='xhinput" + inpts + "' type='hidden' name='modelList[" + inpts + "].modelName' value='" + inote + "'>" + "<input id='clcuncinput" + inpts + "'name='modelList[" + inpts + "].size' type='hidden' value='" + cicunc + "'>" + "<input id='yansecinput" + inpts + "' name='modelList[" + inpts + "].color' type='hidden' value='" + yansec + "'>" + "<input id='jiagecinput" + inpts + "' type='hidden' name='modelList[" + inpts + "].price' value='" + jiagec + "'>" + "<input id='imgSrcinput" + inpts + "' type='hidden' name='modelList[" + inpts + "].imgUrl' value='" + imgSrc + "'>";
        div.append(span);
        $('.xinghaotj').append(div);
        $('.xinghaotj').append(p);
        $('.xinghaotj').append(img);
        $('.xinghaotj').append(input);

        inpts++;
        xianzyix++;
        $('.shuruguig').val('');
        $('.chicun').val('');
        $('.yanse').val('');
        $('.jiage').val('');
        $('#img1').val('');
        $("#fileList").removeAttr("style");
        $('.tishi').hide();

    })

    function delete_system(flag) {
        xianzyix--;
        if (xianzyix <= 0) {
            xianzyix = 0;
        }
        console.log(xianzyix);
        //根元素不删除
        console.log(flag);
        document.getElementById("pic"+ flag+"").remove();
        document.getElementById("by"+flag+"").remove();
        document.getElementById("dexh"+ flag +"").remove();
/*
        document.getElementById("xhinput"+flag+"").remove();
*/
        document.getElementById("clcuncinput"+flag).remove();
        document.getElementById("yansecinput" + flag).remove();
        document.getElementById("jiagecinput" + flag).remove();
        document.getElementById("imgSrcinput" + flag).remove();

    }
    function delete_system1(flag,id) {
        xianzyix--;
        if (xianzyix <= 0) {
            xianzyix = 0;
        }
        //根元素不删除
        var input = "<input  type='hidden' name='dilectModel[" + delectMode + "].modelId' value='" + id + "'>";
        $('.xinghaotj').append(input);
        delectMode++;
        document.getElementById("by" + flag + "").remove();
        inpts--;

    }
    $('.xuanzcdhai').click(function () {
        var p = [];
        $('.xinghaohuizong').empty();
        for (var i = 0; i < xinghaoarray.length; i++) {

            p = xinghaoarray[i];
            var div = $('<div id="bc'+i+'" class="baoyiceng2" onclick="tanchuyinclick('+i+')"></div>');
            var span = "<p id='xh"+p.model+"' class='xqxinghaox'>"+p.model+"</p>"+"<p id='xh"+p.model+"'  class='xqxinghaox'>"+p.size+"</p>"+"<p id='xh"+p.model+"'  class='xqxinghaox'>"+p.color+"</p>"+"<p id='xh"+p.model+"'  class='xqxinghaox'>"+p.price+"</p>";
            div.append(span);
            $('.xinghaohuizong').append(div);
        }
        $('.xuanzvhai').show();

    })

</script>


    </body>
</html>